﻿@{
    ViewBag.Title = "CanvasClock";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style> 
    #canvas {
        position: absolute;
        left: 0px;
        top: 90px;
        margin: 20px;
        background: #00ff90;
        border: thin solid #00ff21;
    }
</style>

<script src='/JsLib/zeus/canvas/zeus.canvas.widgets.js?201408071500'></script>

<h2>Canvas Clock</h2>

<canvas id='canvas' width='400' height='400'>
    Canvas not supported
</canvas>

<script type="text/javascript">
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        FONT_HEIGHT = 15,
        MARGIN = 35,
        HAND_TRUNCATION = canvas.width / 25,
        HOUR_HAND_TRUNCATION = canvas.width / 10,
        NUMERAL_SPACING = 20,
        RADIUS = canvas.width / 2 - MARGIN,
        HAND_RADIUS = RADIUS + NUMERAL_SPACING;

    // Initialization................................................

    context.font = FONT_HEIGHT + 'px Arial';
    loop = setInterval(drawClock, 1000);
</script>

